<template>
    <div>
        <router-view></router-view>
        <div class="footer">
            <ul class="col-5">
                <li :class="{on:isOn==index}" v-on:click="on(index)" v-for="(item,index) in list" :key="index"><router-link :to="to[index]"><p>{{item}}</p></router-link></li> 
            </ul>
        </div>
    </div>
</template>

<script>
	export default{
		name:'tab',
		data () {
			return {
                list:['首页','发现','品牌','购物车','我的'],
                to:['/','/find','/brand','/shopping','/personal'],
                isOn:0
			}
        },
        methods:{
            on (index) {
                this.isOn=index;
            }
        }
	}
</script>

<style scoped>
	
</style>